<template>
    <!-- 顶部四级联动选择器联动组件 -->
    <div class="topSelect">
        <div class="every_operation" v-if="isRegionShow">
            <span><b style="color:red;">*</b> 大区：</span>
            <a-select
                show-search
                :filter-option="filterOption"
                placeholder="请选择大区"
                style="width: 195px" 
                @change="regionChange" 
                v-model="regionId" 
            >
                <a-select-option :key="index" v-for="(item, index) in regionList" :value="item.id">
                    {{item.name}}
                </a-select-option>
            </a-select>
        </div>
        <div class="every_operation" v-if="isCityShow">
            <span><b style="color:red;">*</b> 城市：</span>
            <a-select 
                show-search
                :filter-option="filterOption"
                placeholder="请选择城市"
                style="width: 195px" 
                @change="cityChange" 
                v-model="cityId"
            >
                <a-select-option :key="index" v-for="(item, index) in cityList" :value="item.id">
                    {{item.name}}
                </a-select-option>
            </a-select>
        </div>
        <div class="every_operation" v-if="isWareShow">
            <span><b style="color:red;">*</b> 仓库：</span>
            <a-select
                show-search
                :filter-option="filterOption"
                placeholder="请选择仓库" 
                style="width: 195px" 
                @change="warehouseChange" 
                v-model="organizeId"
            >
                <a-select-option :key="index" v-for="(item, index) in warehouseList" :value="item.id">
                    {{item.name}}
                </a-select-option>
            </a-select>
        </div>
    </div>
</template>

<script>
    import {getHeadquarters, getRegion, getCity, getWarehouse,} from '@/api/api'
    export default {
        name: "TopSelect",
        components: {
                
        },
        props: {
            isRegionShow: {
                type: Boolean,
                default: ''
            },
            isCityShow: {
                type: Boolean,
                default: ''
            },
            isWareShow: {
                type: Boolean,
                default: ''
            },
        },
        data () {
            return {
                headquartersId: '',
                regionList: [],
                regionId: undefined,
                regionName: '',
                cityList: [],
                cityId: undefined,
                cityName: '',
                warehouseList: [],
                organizeId: undefined,
                warehouseName: '',
            }
        },
        created() {
            this.getHeadquartersList()
        },
        methods: {
            // 选择框过滤
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            // 获取总部
            getHeadquartersList(){
                let params = {}
                getHeadquarters(params).then((res)=>{
                    if(res.success){
                        this.headquartersId = res.result.organizeOrgList[0].id
                        this.$emit('headChange', this.headquartersId)
                        this.getRegionList()
                    }
                })
            },
            // 获取大区
            getRegionList(){
                let params = {id: this.headquartersId}
                getRegion(params).then((res)=>{
                    if(res.success){
                        this.regionList = res.result.organizeOrgList
                        if(this.regionList.length == 1){
                            this.regionId = res.result.organizeOrgList[0].id
                            for(var item of this.regionList){
                                if(this.regionId == item.id){
                                    this.regionName = item.name
                                }
                            }
                            this.getCityList()
                            this.$emit('regionChange', this.regionId, this.regionName)
                        }
                    }else{
                        this.$message.warning(res.message, 6)
                    }
                })
            },
            // 选择大区
            regionChange(value){
                this.regionId = value
                for(var item of this.regionList){
                    if(this.regionId == item.id){
                        this.regionName = item.name
                    }
                }
                this.cityList = []
                this.warehouseList = []
                this.getCityList()
                this.$emit('regionChange', this.regionId, this.regionName)
            },
            // 获取城市
            getCityList(){
                let params = {
                    areaIds: this.regionId
                }
                getCity(params).then((res)=>{
                    if(res.success){
                        this.cityList = res.result.organizeOrgList
                        if(this.cityList.length == 1){
                            this.cityId = res.result.organizeOrgList[0].id
                            for(var item of this.cityList){
                                if(this.cityId == item.id){
                                    this.cityName = item.name
                                }
                            }
                            this.getWarehouseList()
                            this.$emit('cityChange', this.cityId, this.cityName)
                        }
                    }
                })
            },
            // 选择城市
            cityChange(value){
                this.cityId = value
                for(var item of this.cityList){
                    if(this.cityId == item.id){
                        this.cityName = item.name
                    }
                }
                this.warehouseList = []
                this.getWarehouseList()
                this.$emit('cityChange', this.cityId, this.cityName)
            },
            // 获取仓库
            getWarehouseList(){
                let params = {
                    cityIds: this.cityId
                }
                getWarehouse(params).then((res)=>{
                    if(res.success){
                        this.warehouseList = res.result.organizeOrgList
                        if(this.warehouseList.length == 1){
                            this.organizeId = res.result.organizeOrgList[0].id
                            for(var item of this.warehouseList){
                                if(this.organizeId == item.id){
                                    this.warehouseName = item.name
                                }
                            }
                            this.$emit('wareChange', this.organizeId, this.warehouseName)
                        }
                    }
                })
            },
            // 选择仓库
            warehouseChange(value){
                this.organizeId = value
                for(var item of this.warehouseList){
                    if(this.organizeId == item.id){
                        this.warehouseName = item.name
                    }
                }
                this.$emit('wareChange', this.organizeId, this.warehouseName)
            },
            // 重置
            onReset() {
                this.regionId = undefined
                this.cityId = undefined
                this.organizeId = undefined
                this.$emit('regionChange', this.regionId)
                this.$emit('cityChange', this.cityId)
                this.$emit('wareChange', this.organizeId)
            },
            // 选择大区时清空城市、仓库
            clearRegion() {
                this.cityId = undefined
                this.organizeId = undefined
                this.$emit('cityChange', this.cityId)
                this.$emit('wareChange', this.organizeId)
            },
            // 选择城市时清空仓库
            clearCity() {
                this.organizeId = undefined
                this.$emit('wareChange', this.organizeId)
            },
        },
    }
</script>

<style lang="less" scoped>
    .topSelect{
        overflow: hidden;
        float: left;
        .every_operation{
            float: left;
            margin-top: 10px;
            margin-right: 20px;
            span{
                display: inline-block;
                width: 85px;
            }
        }
    }
</style>
